<!--
 * @Description: 监测点信息
 * @Author: charles
 * @Date: 2021-12-06 17:09:59
 * @LastEditors: charles
 * @LastEditTime: 2021-12-19 15:46:42
-->
<template>
  <div class="monitor_pointer">
    <div class="pro_dev">
      <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
      <el-tree :data="proDevTree"
        ref="tree"
        :filter-node-method="filterNode"
        :props="{children: 'children', label: 'name'}" @node-click="handleNodeClick"></el-tree>
    </div>
    <div class="data_container">
      <div v-if="params.device_id">
        <div class="engineer">
          <div class="title">
            <i class="el-icon-s-goods"></i> 工程信息
          </div>
          <div class="content" v-if="deviceDetails.engineer">
            <el-form>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="工程编号">
                    {{deviceDetails.engineer.serial_number}}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="工程名称">
                    {{deviceDetails.engineer.name}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="工程类型">
                    {{deviceDetails.engineer.type}}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="工程状态">
                    <el-tag type="sucess" v-if="deviceDetails.engineer.status === '监测中'">{{deviceDetails.engineer.status}}</el-tag>
                    <el-tag type="warning" v-else-if="deviceDetails.engineer.status === '未绑定'">{{deviceDetails.engineer.status}}</el-tag>
                    <el-tag type="danger" v-else>{{deviceDetails.engineer.status}}</el-tag>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="开始时间">
                    {{+deviceDetails.engineer.begin_time | fmtDate}}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="结束时间">
                    {{+deviceDetails.engineer.end_time | fmtDate}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="地址">
                    {{deviceDetails.engineer.address}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="工程负责人">
                    {{deviceDetails.engineer.charge_id}}
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
          </div>
        </div>
        <div class="device">
          <div class="title">
            <i class="el-icon-video-camera-solid"></i> 设备信息
          </div>
          <div class="content">
            <el-form>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="工程设备">
                    {{deviceDetails.serial_number}}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="设备名称">
                    {{deviceDetails.name}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="绑定状态">
                    <el-tag type="sucess" v-if="deviceDetails.bind_status === 1">已绑定</el-tag>
                    <el-tag type="danger" v-else>未绑定</el-tag>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="在线状态">
                    <el-tag type="sucess" v-if="deviceDetails.online_status === 1">在线</el-tag>
                    <el-tag type="danger" v-else>离线</el-tag>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
       
      </div>
      <div class="info" v-else> 请选择设备进行查看</div>
    </div>
  </div>
</template>
<script>
import {get} from '@/utils/request'
import moment from 'moment'
export default {
  data(){
    return {
      filterText:"",
      proDevTree:[],
      monitors:[],
      params:{
        device_id:0,
      },
      deviceDetails:{}
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  mounted(){
    this.loadProDevTree();
  },
  methods:{
    // 加载监测数据
    loadMonitor(){
      let url = "/device/findDeviceDetail"
      get(url,{id:this.params.device_id}).then(resp => {
        this.deviceDetails = resp.data;
      })
    },
    // 加载工程设备
    loadProDevTree(){
      let url = "/engineer/findEngineerDeviceTree"
      get(url).then(resp => {
        this.proDevTree =  resp.data;
      })
    },
    // 过滤节点
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 点击节点
    handleNodeClick(node){
      if(!node.children){
        this.params.device_id = node.id
        this.params.engineer_id = node.engineer_id
        // 加载监测数据
        this.loadMonitor();
      }
    }
  }
}
</script>
<style>
  
</style>
<style lang="scss" scoped>
.monitor_pointer {
  position: absolute;
  width: 100%;
  top: .5em;
  bottom: .5em;
  display: flex;
  .pro_dev {
    flex-basis: 180px;
    padding-right: .5em;
    border-right: 1px solid #dfe4ed;
  }
  .data_container {
    flex: 1;
    padding: 0 1em;
    .title {
      line-height: 2em;
      background-color: #f4f4f4;
      padding: 0 1em;
      margin-bottom: .5em;
      border-radius: 5px;
    }
    .details {
      padding: 0 .5em;
      margin-bottom: 1em;
    }
  }

  .info {
    padding: 3em 0;
    text-align: center;
    color: red;
  }

  .content {
    padding: 0 2em;
  }
  
}
</style>